<template>
  <div class="share-container">
    <van-popup v-model="isShow" @close="popupClose">
      <div v-if="!resultBase64" class="share-wrapper">
        <div id="share-brand">
          <div class="brand">
            <div class="brand-logo">
              <img :src="imgUrlObj" />
            </div>
            <div class="brand-info">
              <div class="info-brandName">
                <img
                  v-if="Number(shareObj.crossBorderProduct)"
                  class="tag-haitao"
                  :src="icon.tagHaitao"
                />
                <img
                  v-if="
                    shareObj.activityLabelMap &&
                      shareObj.activityLabelMap.realSelfBusiness === 1
                  "
                  class="tag-dapai"
                  :src="icon.tagDapai"
                />
                <span v-if="overseaType" class="oversea-tag">{{
                  overseaType
                }}</span>
                <span class="brand-name">{{ shareObj.brandName }}</span>
              </div>
              <div class="tag-wrap">
                <span class="info-tag"
                  >{{ shareObj.onlineProductCount }}款商品</span
                >
                <div class="tag-mark border-1px">
                  品质可靠
                </div>
                <div class="tag-mark border-1px">
                  超值好货
                </div>
              </div>
            </div>
          </div>
          <div class="banner">
            <div class="big-img">
              <img :src="bannerArr[0]" />
            </div>
            <div class="small-img">
              <img :src="bannerArr[1]" />
              <img :src="bannerArr[2]" />
            </div>
          </div>
          <div class="activity-info">
            <div class="price-info">
              <span>全场¥</span
              ><span class="price-text">{{ shareObj.lowestPrice }}</span
              ><span>起</span>
            </div>
            <div
              v-if="shareObj.scheduleType === 3 && !shareObj.isForecast"
              class="pop-activity"
            >
              特卖进行中
            </div>
            <div v-else>
              <div v-if="shareObj.date" class="countdown">
                <!-- 修复XR,6splus机器并且是浏览器访问文字重合bug -->
                {{
                  getHostEnvironment() === 'browser'
                    ? shareObj.date.replace(/\s/gi, '&nbsp;')
                    : shareObj.date
                }}
                {{ shareObj.isForecast ? '开始' : '结束' }}
              </div>
            </div>
          </div>
          <div class="detail">
            <div class="info-left">
              <div class="store-info">
                <img
                  class="store-logo"
                  :src="shareObj.headImg || defaultImg"
                  alt=""
                />
                <div class="store-name">
                  {{ shopName }}
                </div>
              </div>
              <div v-if="shareObj.nickname" class="store-nickname">
                {{ shareObj.nickname }}
              </div>
            </div>
            <div class="info-right">
              <img class="qrcode" :src="qrcode" />
              <div class="qrcode-tip">
                <span>长按识别或</span>
                <span>扫码进入</span>
                <span>活动专场</span>
              </div>
            </div>
          </div>
          <div class="hor-divide"></div>
          <div class="share-bottom-guide">
            <img src="../../assets/poster/brand-share-bottom.png" />
          </div>
        </div>
      </div>
    </van-popup>
    <van-loading v-show="loading" color="white" class="loading" />
    <img
      v-if="getHostEnvironment() === 'wechat' && isShow"
      :src="resultBase64"
      class="result no-select"
    />
    <div
      v-if="getHostEnvironment() === 'browser' && isShow && !this.loading"
      class="result"
    >
      <span>长按图片，保存至手机，方便分享和再次浏览 </span>
      <img :src="resultBase64" />
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcode';
import html2canvas from '@/utils/html2canvas.esm';
import {
  formatImgForCanvas,
  getScrollY,
  getHostEnvironment
} from '@/utils/util';
import shareCardMixin from '@/mixins/shareCardMixin';
import tagHaitao from '@/assets/promotion/haitao/tag-haitao2713.png';
import tagDapai from '@/assets/promotion/dapaiqingcang/icon_dapai_58x16@2x.png';
import defaultImg from '@/assets/poster/defaultImg.png';

export default {
  mixins: [shareCardMixin],
  props: {
    shareObj: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      loading: false,
      qrcode: null,
      isShow: false,
      resultBase64: null,
      imgUrlObj: '',
      bannerArr: [],
      icon: {
        tagHaitao,
        tagDapai
      },
      defaultImg
    };
  },
  computed: {
    shopName() {
      let { shopName } = this.shareObj;
      if (shopName && shopName.length > 15) {
        shopName = `${shopName.slice(0, 15)}...`;
      }
      return shopName;
    },
    overseaType() {
      const { overseaType } = this.shareObj;
      let str = '';
      switch (overseaType) {
        case '1':
          str = '海外直邮';
          break;
        case '2':
          str = '保税仓发货';
          break;
        default:
      }
      return str;
    }
  },
  watch: {
    // shareObj(newVal) {
    //   // 没有底图,显示老海报
    //   if (!newVal.shareFloorImgUrl && newVal && newVal.link) {
    //     this.create();
    //   }
    // },
    isShow(newVal) {
      console.log(newVal);
      if (!newVal) {
        this.loading = false;
        this.resultBase64 = null;
      } else {
        this.loading = true;
        this.create();
      }
    }
  },
  methods: {
    getHostEnvironment,
    async create() {
      this.resetZoom();
      try {
        const bannerLoadArr = this.shareObj.banner.map(item => {
          if (item.includes('x-oss-process')) {
            return item;
          }
          return formatImgForCanvas(item, 138, 138);
        });
        // todo 后端超时 加载失败了如何处理
        this.bannerArr = await Promise.all(bannerLoadArr);
        this.imgUrlObj = await formatImgForCanvas(this.shareObj.imgUrl, 36, 36);
      } catch (e) {
        console.log(e);
      }
      QRCode.toDataURL(this.shareObj.link, { margin: 1 }).then(url => {
        this.qrcode = url;
        this.$nextTick(() => {
          const source = document.getElementById('share-brand');
          if (!source) return;
          const rect = source.getBoundingClientRect();
          const coptDom = source.cloneNode(true);
          coptDom.style.zIndex = -1;
          coptDom.style.width = `${rect.width}px`;
          coptDom.style.height = `${rect.height}px`;
          document.body.appendChild(coptDom);

          // 适配iOS 13, 12 及以下 && 安卓
          const scrollY = getScrollY();
          console.log('==海报==', rect, scrollY);
          html2canvas(coptDom, {
            allowTaint: true,
            useCORS: true,
            logger: true,
            x: rect.left,
            y: rect.top + scrollY,
            dpi: window.devicePixelRatio
          })
            .then(canvas => {
              let imgUri = canvas.toDataURL();
              // imgUri = null;
              this.resultBase64 = imgUri;
              this.loading = false;
              document.body.removeChild(coptDom);
            })
            .catch(err => {
              this.loading = false;
              document.body.removeChild(coptDom);
              console.log(err);
            });
        });
      });
    }
  }
};
</script>

<style scoped>
.van-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  background-color: transparent;
  z-index: 9999;
}

.bg-transparent {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
</style>

<style lang="scss" scoped>
.share-arrow {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 8888;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-end;
  padding-right: 1rem;
  img {
    margin-right: 20px;
    width: 0.5rem;
    height: 0.6rem;
  }
}
.share-wrapper {
  width: 375px;
  position: relative;
  // 不给高度不可见
  // height: 100vh;
}
#share-brand {
  //未知元素宽高居中处理
  font-family: PingFang-SC-Medium;
  width: 375px;
  top: 50%;
  left: 50%;
  position: fixed;
  transform: translate(-50%, -50%);
  background: #fff;
  .brand {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 14px 8px 12px;

    .brand-logo {
      margin-right: 8px;
      width: 50px;
      height: 50px;
      position: relative;
      border: 1px solid rgba(51, 51, 51, 0.05);
      border-radius: 4px;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 46px;
        height: 46px;
      }
    }

    .brand-info {
      .info-brandName {
        display: flex;
        align-items: center;
        font-size: 16px;
        flex-wrap: wrap;
        word-break: break-all;

        .tag-haitao {
          margin-right: 4px;
          display: inline-block;
          width: 32px;
          height: 16px;
          vertical-align: middle;
        }
        .tag-dapai {
          margin-right: 4px;
          display: inline-block;
          width: 58px;
          height: 16px;
          vertical-align: middle;
        }
        .oversea-tag {
          background: rgba(255, 229, 229, 1);
          border-radius: 2px;
          padding: 2px 4px;
          margin-right: 3px;
          font-size: 12px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(255, 16, 16, 1);
          line-height: 12px;
        }
        .brand-name {
          font-family: PingFangSC-Medium;
          font-weight: 500;
          color: #333;
          line-height: 22px;
        }
      }

      .tag-wrap {
        margin-top: 4px;
        display: flex;
        align-items: center;
      }
      .info-tag {
        margin-right: 9px;
        display: inline-block;
        font-size: 13px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: #ccaa77;
      }

      .info-tag:last-child {
        margin-right: 0;
      }

      .tag-mark {
        font-size: 12px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: #ccaa77;
        padding: 0 6px;
        margin-right: 6px;
        line-height: normal;
      }
    }
  }
  .banner {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    margin: 0 8px;
    .big-img {
      width: 240px;
      height: 240px;
      margin-right: 2px;
      img {
        width: 240px;
        height: 240px;
      }
    }
    .small-img {
      img {
        width: 117px;
        height: 119px;
        margin-bottom: 2px;
      }
      img:last-child {
        margin-bottom: 0;
      }
    }
  }
  .activity-info {
    width: 359px;
    height: 36px;
    background: rgba(255, 48, 55, 0.05);
    border-radius: 1px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .price-info {
      width: 170px;
      height: 100%;
      background: linear-gradient(
        180deg,
        rgba(255, 88, 94, 1) 100%,
        rgba(255, 48, 55, 1) 100%
      );
      border-radius: 0 100px 0 0;
      font-size: 12px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      display: flex;
      align-items: baseline;
      justify-content: center;
      padding-right: 36px;
      box-sizing: border-box;

      .price-text {
        font-size: 22px;
        font-family: DINAlternate-Bold, DINAlternate;
        font-weight: bold;
        color: #fff;
        display: inline-block;
        margin-top: 5px;
      }
    }

    .pop-activity {
      font-size: 12px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      color: #e62525;
      line-height: 17px;
      margin-right: 11px;
    }

    .countdown {
      color: #e62525;
      margin-right: 11px;
      font-size: 12px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
    }
  }
  .detail {
    padding: 6px 0;
    display: flex;
    align-items: center;
    margin-bottom: 3px;
    .info-left {
      .store-info {
        width: 211px;
        height: 46px;
        background: #f6f6f6;
        border-radius: 0 23px 23px 0;
        display: flex;
        align-items: center;
        padding-left: 8px;
        box-sizing: border-box;
        .store-logo {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          margin-right: 6px;
        }
        .store-name {
          font-family: PingFangSC-Medium;
          font-weight: 500;
          color: #333;
          font-size: 13px;
        }
      }
      .store-nickname {
        font-size: 12px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: #999;
        margin-top: 6px;
        margin-left: 8px;
        line-height: 17px;
      }
    }
    .info-right {
      display: flex;
      align-items: center;
      margin-left: 12px;
      margin-right: 8px;
      .qrcode {
        width: 84px;
        height: 84px;
      }
      .qrcode-tip {
        margin-left: 8px;
        display: flex;
        flex-direction: column;
        width: 52px;
        font-size: 10px;
        font-family: PingFangSC-Regular;
        color: #666;
        line-height: 14px;
      }
    }
  }
  .hor-divide {
    // bug 之前是加载本地图片，由于小于2K被自动转换成base64 导致ios13上海报绘制失败
    width: 100%;
    height: 13px;
    background: url('https://akmer.aikucun.com/6400c71879572a4012323a2a3488a0f418e32e75_1591971879302_93.png')
      no-repeat #fff;
    background-size: 100% 100%;
  }
  .share-bottom-guide {
    width: 100%;
    height: 82px;
    img {
      width: 326px;
      height: 60px;
      margin: 8px auto 0;
    }
  }
}
.loading {
  z-index: 9999;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.result {
  top: 50%;
  left: 50%;
  position: fixed;
  width: 300px;
  transform: translate(-50%, -50%);
  z-index: 9999;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  span {
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 8px;
  }
  &.no-select {
    -webkit-touch-callout: none; /*系统默认菜单被禁用*/
    user-select: none; //文本不能被选择
  }
  img {
    width: 100%;
    border-radius: 8px;
  }
}
</style>
